<template>
  <div>
    <div
      class="card"
      v-for="(item, index) in data"
      :key="index"
    >
      <img
        class="thumb"
        :src="item.image"
        mode="aspectFit"
      >
      <div class="info">
        <p class="text">{{item.product_name}}</p>
        <div class="spec">规格: {{item.item_no}}</div>
        <div class="row">
          <p class="price"><span class="price-icon">￥</span>{{item.price}}</p>
          <div class="count"> X {{item.num}}</div>
          <div
            v-if="status==='13'"
            @click.stop="toComment(item.is_comment,item.product_id)"
            :class="item.is_comment===0?'comment-btn':'has-comment'"
          >{{item.is_comment===0?'评论':'已评论'}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data', 'status', 'orderId'],
  methods: {
    toComment (status, id) {
      console.log(status)
      if (status === 0) {
        wx.navigateTo({
          url: '/pages/comment/main?order_id=' + this.orderId + '&product_id=' + id
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.card {
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 200rpx;
  border-bottom: 1rpx solid #f0f0f0;
  .thumb {
    width: 160rpx;
    height: 160rpx;
    border-radius: 15rpx;
  }
  .info {
    width: 460rpx;
    height: 160rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // border: 1rpx solid #000;
    .spec {
      font-size: 20rpx;
      color: #747474;
      margin-bottom: 5rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      bottom: 10rpx;
    }
    .text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 75rpx;
      font-size: 600;
      color: #000;
    }
    .row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 35rpx;
      line-height: 26rpx;
      .price {
        color: #b93a39;
        font-size: 36rpx;
        font-weight: 400;
        .price-icon {
          font-size: 24rpx;
          display: inline-block;
        }
      }
      .count {
        font-size: 20rpx;
        margin-left: 200rpx;
      }
      .comment-btn {
        font-size: 20rpx;
        height: 40rpx;
        border-radius: 20rpx;
        text-align: center;
        line-height: 40rpx;
        width: 100rpx;
        border: 1rpx solid #cdb27e;
        color: #cdb27e;
      }
      .has-comment {
        font-size: 20rpx;
        height: 40rpx;
        border-radius: 20rpx;
        text-align: center;
        line-height: 40rpx;
        width: 100rpx;
        border: 1rpx solid #6d6d6d;
        color: #6d6d6d;
      }
    }
  }
}
</style>
